<template>
  <div class="main">
    <div class="header-card">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="title">Authentication</div>
      </div>
      <div class="aucard">
        <div class="aucard-cont">
          <div class="at"><img src="@/assets/img/tx.png" /></div>
          <div class="cp1">Information</div>
          <div class="cp-box">
            <div class="cp-box-l">
              <div class="cp-box-l-item">
                <div class="cbli-l">
                  <img src="@/assets/img/authcardicon1.png" />Account
                </div>
                <div class="cbli-r">{{ account_name }}</div>
              </div>
              <div class="cp-box-l-item">
                <div class="cbli-l">
                  <img src="@/assets/img/authcardicon1.png" />Uid
                </div>
                <div class="cbli-r">{{ uid }}</div>
              </div>
            </div>
            <div class="cp-box-r">
              <img v-if="status == -1" src="@/assets/img/authcardright.png" />
              <img v-if="status == -0" src="@/assets/img/authcardright0.png" />
              <img v-if="status == 1" src="@/assets/img/authcardright1.png" />
              <img v-if="status == 2" src="@/assets/img/authcardright2.png" />
              <p v-if="status == -1">Not reviewed</p>
              <p v-if="status == 0">Under review</p>
              <p v-if="status == 1">Approved</p>
              <p v-if="status == 2">Review failed</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="[{ ovt: status == 0 }]">
      <div class="fillincontent">
        <div class="fill-tit">Fill in content</div>

        <div class="fb-item">
          <div class="fb-inputbox">
            <div class="iconbox">
              <img src="@/assets/img/auic1.png" />
            </div>
            <!-- <input type="text" v-model="choose" placeholder="Choose" /> -->
            <van-dropdown-menu placeholder="Choose">
              <van-dropdown-item
                v-model="choose"
                :options="[
                   { text: 'Passport', value: 'Passport' },
                  { text: 'Driverss License', value: 'Driverss License' },
                  { text: 'ID card', value: 'ID card' },
                 
                ]"
              />
            </van-dropdown-menu>
          </div>
        </div>
        <div class="fb-item">
          <div class="fb-inputbox">
            <div class="iconbox">
              <img src="@/assets/img/auic2.png" />
            </div>
            <input
              type="text"
              v-model="idNumber"
              placeholder="Enter your ID number"
            />
          </div>
        </div>
        <div class="fb-item">
          <div class="fb-inputbox">
            <div class="iconbox">
              <img src="@/assets/img/auic3.png" />
            </div>
            <input
              type="text"
              v-model="real_name"
              placeholder="Enter your name"
            />
          </div>
        </div>
      </div>
      <div class="hr"></div>
      <div class="idbox">
        <div class="idbox-tit">
          <span>Please upload your ID photo </span>
          <div class="example">Example</div>
        </div>
        <van-uploader :after-read="upImage">
          <div :class="['idcard', { pd0: pic_url }]">
            <template v-if="!pic_url && !pic_url_ajax">
              <div class="idcard-l">
                <div class="idcard-l-p1">POSITIVE SIDE</div>
                <div class="idcard-l-p2">
                  Please add the front photo of the certificate.
                </div>
              </div>
              <div class="idcard-r"><img src="@/assets/img/aucard1.png" /></div>
            </template>
            <template v-else-if="!pic_url && pic_url_ajax">
              <div class="sucimg dc">
                <van-loading size="40" v-if="!areaCode" />
              </div>
            </template>
            <template v-else>
              <div class="sucimg">
                <img :src="pic_url" />
              </div>
            </template>
          </div>
        </van-uploader>
        <!-- <div class="idcard">
        <div class="idcard-l">
          <div class="idcard-l-p1">BACK</div>
          <div class="idcard-l-p2">
            Please upload the reverse of the ID photo
          </div>
        </div>
        <div class="idcard-r"><img src="@/assets/img/aucard2.png" /></div>
      </div> -->
      </div>
      <div class="query-btn" v-if="status != 1" @click="submit">
        <template v-if="submitAjax">
          <van-loading size="24" color="#fff" />
        </template>
        <template v-else>{{ status == 2 ? "Resubmit" : "Submit" }}</template>
      </div>
    </div>
  </div>
</template>

<script>
import { httpCertificationAddAndUpdate, httpIsCertification } from "@/http/api";
import { upFile } from "@/utils/common";
export default {
  name: "authentication",
  data() {
    return {
      choose: "Passport",
      idNumber: "",
      real_name: "",
      pic_url: "", // https://file.imobybox.com/images/1662275683383.jpg
      submitAjax: false,
      account_name: localStorage.getItem("account_name") || "",
      status: -1, //-1:未审核 0:审核中,1:审核成功,2:审核失败
      uid: localStorage.getItem("uid") || "",
      pic_url_ajax: false,
    };
  },
  created() {
    this.getHttpIsCertification();
    console.log(httpCertificationAddAndUpdate);
  },
  methods: {
    // 获取认证信息
    async getHttpIsCertification() {
      let res = await httpIsCertification();
      if (res.code == 0) {
        this.status = "status" in res.data ? res.data.status : -1;
      }
    },
    // 上传图片
    async upImage(files) {
      const base = process.env.VUE_APP_API;
      const API = process.env.VUE_APP_ENV === "dev" ? "/api" : "";
      if (this.pic_url_ajax) return;
      this.pic_url_ajax = true;
      upFile(
        files.file,
        `${base}${API}/api/tool/imgUpload`,
        (res) => {
          console.log(res);
          if (res.code == 0) {
            this.pic_url = res.data.pic_url || "";
          } else {
            this.$toast.fail(res.message);
          }
          this.pic_url_ajax = false;
        },
        () => {
          this.$toast.fail("Upload failed");
          this.pic_url_ajax = false;
        }
      );
    },
    // submit
    async submit() {
      if (this.submitAjax) return;
      if (!this.real_name.trim()) return this.$toast("Please enter your name");   //请输入姓名
      if (!this.pic_url) return this.$toast("Please upload the picture");     //请上传图片
      const index = this.pic_url.lastIndexOf("/");
      const url = this.pic_url.substring(index + 1);

      let params = {
        real_name: this.real_name,
        img: url,
      };

      this.submitAjax = true;
      let res = await httpCertificationAddAndUpdate(params);
      if (res.code == 0) {
        this.$toast.success("Certification submitted");  //已提交认证
        this.$router.back();
      } else {
        this.$toast.fail(res.message);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import url("./ucenter-common.less");

.main {
  padding-bottom: 120px;

  .header-card {
    .uc-header {
      padding-top: 60px;
      margin-bottom: 76px;
    }

    .aucard {
      width: 750px;
      height: 336px;
      background: url("~@/assets/img/authenticationheaderbg.png") center/798px
        336px no-repeat;

      .aucard-cont {
        width: 682px;
        height: 333px;
        background: url("~@/assets/img/authenticationheadercard.png")
          center/682px 333px no-repeat;
        margin: auto;
        padding: 0 32px;
        box-shadow: 0 35px 20px -30px #aab2dc;

        .at {
          width: 98px;
          height: 98px;
          border: 4px solid #fff;
          border-radius: 50%;
          overflow: hidden;
          margin: auto;
          position: relative;
          top: -30px;
          box-shadow: 0 0 6px #aab2dc;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .cp1 {
          font-size: 30px;
          font-weight: 700;
          letter-spacing: 0px;
          color: rgba(112, 126, 162, 1);
          margin-bottom: 48px;
        }

        .cp-box {
          display: flex;
          width: 100%;
          padding-right: 16px;
          display: flex;
          justify-content: space-between;

          .cp-box-l {
            .cp-box-l-item {
              display: flex;
              align-items: center;
              margin-bottom: 26px;
              font-size: 28px;
              font-weight: 400;
              letter-spacing: 0px;
              color: rgba(132, 144, 177, 1);

              .cbli-l {
                display: flex;
                align-items: center;
                width: 200px;

                img {
                  width: 40px;
                  height: 40px;
                  margin-right: 10px;
                }
              }
            }
          }

          .cp-box-r {
            text-align: right;
            font-size: 24px;
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
            position: relative;
            top: -48px;

            img {
              width: 117px;
              height: 117px;
            }
          }
        }
      }
    }
  }

  .fillincontent {
    width: 100%;
    padding: 58px 32px 48px;

    .fill-tit {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 0px;
      color: rgba(112, 126, 162, 1);
    }

    .fb-item {
      width: 100%;
      margin-top: 28px;

      .fb-inputbox {
        display: flex;
        width: 100%;
        height: 93px;
        background: rgba(246, 247, 252, 1);
        border-radius: 20px;
        display: flex;
        align-items: center;
        border: 2px solid transparent;
        transition: all 0.25s;

        .iconbox {
          width: 104px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          user-select: none;
          flex-shrink: 0;

          img {
            width: 48px;
            height: 48px;
          }
        }

        input {
          flex: 1;
          height: 100%;
          background: transparent;
          border: none;
          outline: none;
          font-size: 30px;
          padding-right: 40px;

          &::-webkit-input-placeholder {
            color: #c5c5c5;
          }
        }

        &.active {
          border: 2px solid rgba(220, 188, 155, 1);
          background: #fff;
        }

        &.error {
          border: 2px solid rgba(235, 63, 63, 1);
          background: #fff;
        }
      }

      ::v-deep .van-dropdown-menu {
        width: 100%;

        .van-dropdown-menu__bar {
          background: transparent;
          box-shadow: none;

          .van-dropdown-menu__item {
            justify-content: flex-start;
          }

          .van-dropdown-menu__title {
            color: #c5c5c5;
            font-size: 30px;
            padding: 0;
            width: 100%;
            display: block;
            &::after {
              right: 24px;
            }
          }
        }

        .van-dropdown-item__option--active {
          color: #e6cdb4;

          .van-dropdown-item__icon {
            color: #e6cdb4;
          }
        }
      }
    }
  }

  .hr {
    width: 100%;
    height: 12px;
    background: rgba(250, 251, 252, 1);
  }

  .idbox {
    padding: 32px;

    .idbox-tit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(132, 144, 177, 1);
      margin-bottom: 30px;

      .example {
        width: 160px;
        height: 54px;
        background: rgba(230, 205, 180, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        font-size: 28px;
        color: rgba(255, 255, 255, 1);
        border-radius: 10px;
      }
    }

    .idcard {
      width: 682px;
      height: 329px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(236, 238, 253, 1);
      box-shadow: 2px 5px 16px 0px rgba(235, 235, 235, 0.29);
      border-radius: 20px;
      padding: 70px 32px 0;
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;

      &.pd0 {
        padding: 0;
      }

      .idcard-l {
        padding-right: 40px;

        .idcard-l-p1 {
          font-size: 28px;
          font-weight: 700;
          letter-spacing: 0px;
          color: rgba(112, 126, 162, 1);
          margin-bottom: 30px;
        }

        .idcard-l-p2 {
          font-size: 24px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 1.5;
          color: rgba(112, 126, 162, 1);
          word-break: break-all;
        }
      }

      .idcard-r {
        flex-shrink: 0;

        img {
          width: 326px;
          height: 201px;
        }
      }

      .sucimg {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;

        &.dc {
          display: flex;
          justify-content: center;
          padding-top: 60px;
        }

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .query-btn {
    width: 682px;
    height: 93px;
    opacity: 1;
    background: linear-gradient(
      178.44deg,
      rgba(238, 220, 201, 1) 0%,
      rgba(220, 188, 155, 1) 100%
    );
    box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);
    font-size: 28px;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    margin: 20px auto;
    border-radius: 20px;
    transition: all 0.15s;

    &:active {
      box-shadow: 1px 3px 4px 0px rgba(201, 173, 144, 0.51);
      transform: translateY(2px);
    }
  }
}

.ovt {
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
    position: absolute;
    top: 0;
    z-index: 5;
  }
}
</style>
